<template>
  <div class="coupon-body">
      <img src="./img/banner.png" class="coupon-banner" alt="">
      <div class="coupon-title">—活动时间—</div>
      <div class="coupon-box1">
        <img src="../../../images/knife_logo.png" class="logo" alt="">
        <div class="coupon-p1">05 月 06 日 00:00-23:59</div>
        <div class="coupon-p2">该活动周一开启</div>
        <img src="./img/coupon.png" class="coupon-icon coupon-icon1" alt="">
        <img src="./img/gold.png" class="coupon-icon coupon-icon2" alt="">
      </div>
      <div class="coupon-title">—活动范围—</div>
      <div class="coupon-box2">
        <div class="coupon-watch">
          <img src="./img/watch.png" alt="">
        </div>
        <img src="../../../images/knife_logo.png" class="logo" alt="">
        <div class="coupon-p1">全 场 商 品 均 可 参 与</div>
        <div class="coupon-p2">活 动 商 品 不 支 持 退 换 货</div>
        <img src="./img/gold.png" class="coupon-icon coupon-icon3" alt="">
      </div>
      <div class="coupon-title">—活动优惠—</div>
      <div class="coupon-box3">
        <ul class="coupon-ul">
          <li class="coupon-li">
            <div class="coupon-s1">单笔消费1000元</div>
            <div class="coupon-s2">
              <div class="coupon-s3">
                <div class="coupon-s4">38
                  <div class="coupon-s5">满1000可用</div>
                </div>
              </div>
            </div>
          </li>
          <li class="coupon-li">
            <div class="coupon-s1">单笔消费2000元</div>
            <div class="coupon-s2">
              <div class="coupon-s3">
                <div class="coupon-s4">88
                  <div class="coupon-s5">满2000可用</div>
                </div>
              </div>
            </div>
          </li>
          <li class="coupon-li">
            <div class="coupon-s1">单笔消费4000元</div>
            <div class="coupon-s2">
              <div class="coupon-s3">
                <div class="coupon-s4">198
                  <div class="coupon-s5">满4000可用</div>
                </div>
              </div>
            </div>
          </li>
          <li class="coupon-li">
            <div class="coupon-s1">单笔消费8000元</div>
            <div class="coupon-s2">
              <div class="coupon-s3">
                <div class="coupon-s4">398
                  <div class="coupon-s5">满8000可用</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="coupon-p3">
          <p>·优惠券可叠加赠送，例如满3000元同时赠送38元券和88元券，满15000元同时赠送四张优惠券。</p>
          <p>·同一客户每张优惠券限领一次。</p>
          <p>·优惠券有效期：<i>05月07日-05月21日</i></p>
          <p>·此处消费金额指商品实付款金额，不包含税费、运费、优惠券等！</p>
          <!-- <span>·多买多得，上不封顶</span> -->
        </div>
        <img src="./img/coupon.png" class="coupon-icon coupon-icon4" alt="">
      </div>
      <div style="width: 875px;height: 80px;margin: 0 auto;position: relative;">
        <img src="./img/coupon.png" class="coupon-icon coupon-icon5" alt="">
      </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
    }
  },
  computed: {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.coupon-body{
  width: 100%;
  background-color: #FFA374;
  .coupon-banner{
    width: 100%;
  }
  .coupon-title{
    width:397px;
    height:88px;
    line-height: 88px;
    text-align: center;
    color: #fff;
    font-size: 28px;
    margin: 120px auto 0;
    background:linear-gradient(140deg,rgba(217,72,72,1) 0%,rgba(219,83,47,1) 100%);
    box-shadow:-1px 4px 14px 0px rgba(249,150,60,1);
    border-radius:57px;
  }
  .logo{
    width: 155px;
    margin-top: 76px;
  }
  .coupon-p1{
    font-size:40px;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
  .coupon-p2{
    font-size:20px;
    color:rgba(102,102,102,1);
  }
  .coupon-icon{
    width: 75px;
    position: absolute;
  }
  .coupon-box1{
    position: relative;
    margin: 27px auto 0;
    width: 875px;
    height: 465px;
    text-align: center;
    box-sizing: border-box;
    border: 18px solid #FFE8B9;
    background-color: #fff;
    border-radius: 30px;
    .coupon-p1{
      margin-top: 95px;
    }
    .coupon-p2{
      margin-top: 20px;
    }
    .coupon-icon1{
      top: 190px;
      left: -295px;
    }
    .coupon-icon2{
      width: 62px;
      height: 53px;
      bottom: -100px;
      right: -243px;
    }
  }
  .coupon-box2{
    margin: 27px auto 0;
    width: 875px;
    height: 390px;
    box-sizing: border-box;
    padding-left: 235px;
    background-color: #fff;
    position: relative;
    text-align: center;
    border-radius: 30px;
    .coupon-watch{
      width: 235px;
      height: 100%;
      position: absolute;
      left: 0;
      text-align: center;
      background-color: #FFE8B9;
      border-radius: 30px 0 0 30px;
      img{
        width: 151px;
        margin-top: 55px;
      }
    }
    .coupon-p1{
      margin-top: 65px;
    }
    .coupon-p2{
      margin-top: 15px;
    }
    .coupon-icon3{
      width: 124px;
      height: 106px;
      bottom: -86px;
      left: -524px;
    }
  }
  .coupon-box3{
    margin: 40px auto 0;
    width: 875px;
    // height: 730px;
    box-sizing: border-box;
    background-color: #FFE8B9;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    z-index: 1;
    .coupon-ul{
      box-sizing: border-box;
      padding: 8px 25px 0;
      .coupon-li{
        height: 107px;
        margin-top: 20px;
        overflow: hidden;
        .coupon-s1{
          background-color: #fff;
          width: 540px;
          display: inline-block;
          float: left;
          text-align: center;
          font-size:32px;
          font-weight: 500;
          color: #333333;
          height: 100%;
          line-height: 107px;
        }
        .coupon-s2{
          display: inline-block;
          height: 100%;
          float: left;
          margin-left: 40px;
          background-color: #DB4A3E;
          overflow: hidden;
          .coupon-s3{
            width: 238px;
            float: left;
            height: 100%;
            border-right: 1px dashed #fff;
            text-align: center;
            &:first-of-type{
              margin-left: 2px;
              border-left: 1px dashed #fff;
            }
            &:last-of-type{
              margin-right: 2px;
            }
            .coupon-s4{
              font-size: 58px;
              color: #fff;
              position: relative;
              display: inline-block;
              margin: 10px auto 0;
              line-height: 45px;
              &::before{
                content: '￥';
                position: absolute;
                top: 5px;
                left: -20px;
                font-size: 19px;
              }
              .coupon-s5{
                position: absolute;
                width: 150%;
                left: -20px;
                font-size: 16px;
                text-align: center;
              }
            }
          }
        }
      }
    }
    .coupon-p3{
      width: 100%;
      // height:87px;
      box-sizing: border-box;
      padding: 24px 25px 28px;
      background:linear-gradient(180deg,rgba(255,232,185,1) 0%,rgba(255,255,255,1) 100%);
      font-size:16px;
      color:rgba(102,102,102,1);
      // position: absolute;
      // bottom: 0;
      p{
        line-height: 22px;
        margin-bottom: 10px;
        &:last-child{
          margin-bottom: 0;
        }
      }
      span{
        color: #666666;
        margin-left: 40px;
        &:first-of-type{
          margin: 0;
        }
      }
      i{
        color: #333333;
      }
    }
    .coupon-icon4{
      top: -52px;
      right: -180px;
      transform: rotateY(180deg);
    }
  }
  .coupon-icon5{
      bottom: 50px;
      left: -68px;
  }
}
.notice{
  color: #DB4A3E;
  line-height: 22px;
  margin-bottom: 8px;
}
</style>
